<template>
<div class="case-search common-page">
  <tab-panel :tab-list="tabList">
    <div class="group-panel" slot="table-list">
      <xdh-list-panel 
        class=""
        :fit="true"
        :load="listLoad" 
        :state="state"
        :pager="false"
        :is-auto="true"
      >
        <template slot="tool"> 
          <el-button type="primary" size="mini" @click="editDialogClose = false">新增</el-button>
        </template>
        <xdh-table :data="state.list"
          :columns="state.tableCols" 
          height="100%" 
          border
          :auto-load="true"
          size="mini"
        >
          <template slot="ctrl" slot-scope="scope">
            <el-button size="mini" type="text" @click="listClick(scope)">编辑</el-button>
            <el-button size="mini" type="text" >删除</el-button>
          </template>
        </xdh-table>
      </xdh-list-panel>
    </div>
    <div class="group-panel" slot="chart-list" >
      <detective-group-chart></detective-group-chart>
    </div>
  </tab-panel>

  <xdh-dialog class="detective-group-dialog" :closed.sync="editDialogClose" title="组织更改" width="90%" height="90%">
    <detective-group-edit></detective-group-edit>
    <div slot="footer" class="add-submit" >
      <el-button size="mini" type="primary">提交</el-button>
      <el-button size="mini" type="danger">还原</el-button>
    </div>
  </xdh-dialog>

</div>
</template>

<style lang="scss" scoped>
@import "../../../src/style/_vars.scss";
.case-search{
  padding: 5px;
  background: $--background-color-base;
  .group-panel{
    height: 100%;
  }
}
.detective-group-dialog{
  /deep/ .xdh-window{
    min-width: 1160px;
  }
}
</style>

<script>
import XdhDialog from '@/widgets/xdh-dialog'
import tabPanel from '@/components/common/tab-panel'
import XdhListPanel from '@/widgets/xdh-list-panel'
import XdhTable from '@/widgets/xdh-table'
import callPlatform from '@/helper/call-platform'
import DetectiveGroupChart from '../components/detective-group-chart'
import DetectiveGroupEdit from '../components/detective-group-edit'

import {APP_DETECTIVE_HOST} from '@/config'
import detectiveGroup from '@/base/mixin/detective-detect-group'

const INDEXCOL = { type: 'index', label: '序号', fixed: 'left', width: '80' }
const CONTROLCOL = { label: '操作', fixed: 'right', width: '120', prop: 'ctrl' }
export default {
  name: 'caseSearch',
  mixins: [detectiveGroup],
  components: {
    tabPanel,
    XdhListPanel,
    XdhTable,
    DetectiveGroupChart,
    DetectiveGroupEdit,
    XdhDialog
  },
  props: {
  },
  data() {
    return {
      editDialogClose: true,  
      tabList: [
        { label: '数据列表', name: 'table-list' },
        { label: '图形列表', name: 'chart-list' }
      ],
      state: {
        list: [],
        total: 0,
        tableCols: []
      }
      
    }
  },
  watch: {
    
  },
  methods: {
    listLoad(page, limit) {
      return this.getDetectiveGroups().then((res) => {
        this.state.list = this._tableListInit(res.list)
        this.state.tableCols = this._tableColumnInit(res.colData)
      })
    },
    _tableListInit(arr) { // 列表处理
      return arr.map((item) => {
        let members = item.members
        item.leader = members.find((i) => { return i.type === 'leader' }).name
        item.viceLeader = members.find((i) => { return i.type === 'viceLeader' }).name
        item.connector = members.find((i) => { return i.type === 'connector' }).name
        item.teammate = members.filter((i) => {
          return i.type === 'teammate'
        }).map((item) => { return item.name }).join('/')
        return item
      })
    },
    _tableColumnInit(colData) { // 初始化列表头
      let contents = colData.map((item) => {
        return {
          label: item.label,
          prop: item.prop,
          showOverflowTooltip: true
        }
      })
      return [ INDEXCOL, ...contents, CONTROLCOL ]
    },
    listClick(scope) {
      console.log(scope)
      callPlatform(
        {
          fromPlatformApp: true,
          app: {
            label: '研判工作台',
            name: 'detective',
            url: APP_DETECTIVE_HOST // 'http://www.baidu.com'
          }
        }
      )
    }
  },
  mounted() {
    // this.getDetectiveGroups().then((res) => {
    //   console.log(res)
    // })
  }
}
</script>

